<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{_fragment::head(title='登录')}">
<!--    <meta charset="UTF-8">-->
<!--    <title>登录</title>-->
<!--    <meta name="viewport" content="width=device-width initial-scale=1.0">-->
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">-->
<!--    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">-->
</head>
<body>


<div class="m-padding-top-middle" >
    <div class="ui container " style="width:350px">
        <h2 class="ui teal header center aligned">
            <div class="content">
                登录
            </div>
        </h2>
        <form class="ui form" method="post" action="/login" th:action="@{/admin/login}">
            <div class="ui stacked segment">
                <div class="field">
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        <input type="text" name="username" placeholder="请输入用户名...">
                    </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                        <i class="lock icon"></i>
                        <input type="password" name="password" placeholder="请输入密码...">
                    </div>
                </div>
                <div class="ui fluid teal submit button">Login</div>
            </div>

            <div class="ui error message"></div>
        </form>
    </div>
</div>



<th:block th:replace="~{_fragment :: script}">
</th:block>

<script type="text/javascript">
    $(document)
        .ready(function() {
            $('.ui.form')
                .form({
                    fields: {
                        username: {
                            identifier  : 'username',
                            rules: [
                                {
                                    type   : 'empty',
                                    prompt : '请输入用户名'
                                }
                            ]
                        },
                        password: {
                            identifier  : 'password',
                            rules: [
                                {
                                    type   : 'empty',
                                    prompt : '请输入密码'
                                },
                                {
                                    type   : 'length[6]',
                                    prompt : '密码至少包含六位数字'
                                }
                            ]
                        }
                    }
                })
            ;
        })
    ;

</script>
</body>
</html>